<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        input{
            margin-bottom: 8px;
        }
        button{
            margin-bottom: 8px;
            width: 165px;
        }
        #login_box{
            margin:150px auto;
            text-align: center;
            width: 300px;
            height: 280px;
            border: black 1px solid;
        }
    </style>
</head>
<body>
<div id="login_box">
    <h3>登  &nbsp;&nbsp;&nbsp; 录</h3>
    <input v-model="mail" type="email" placeholder="邮箱" required="required" ><br>
    <input v-model="pwd" type="password" placeholder="密码" required="required"><br>
    <input v-model="input_code" type="text" placeholder="验证码" required="required">
    <hr>
    <button @click="sendMail()">获取验证码</button>
    <br>
    <button @click="login()">登录</button>
    <br>
    <button @click="register()">注册</button>

</div>
</body>
<script>
    var app=new Vue({
        el:"#login_box",
        data:{
            mail:"",
            code:"",
            input_code:"",
            recode:"",
            pwd:""
        },
        methods:{
            sendMail:function () {
                var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                if(re.test(this.mail)){
                    for(var i=0;i<6;i++)
                    {
                        this.code+=Math.floor(Math.random()*10);
                    }
                    var that=this;
                    axios.get("/sendMail?email="+this.mail+"&xcode="+this.code).then(function (response) {
                            that.recode=that.code;
                            that.code="";
                            if (response.data===true){
                                alert("验证码发送成功,请尽快到邮箱获取")
                            }else {
                                alert("验证码发送异常,请检查网络环境或邮箱信息")
                            }
                        },function (err) {
                            alert("系统异常")
                        }
                    )
                }else {
                    alert("邮箱格式错误");
                }

            },
            register:function () {
                var that=this;
                if(this.mail==="" || this.recode==="" || this.pwd===""){
                    alert("请完整表单信息!!!");
                }else {
                    if(this.input_code===this.recode){
                        axios.get("/searchUser?email="+that.mail).then(
                            function (response) {
                                if(response.data===that.mail){
                                    alert("邮箱已被注册!")
                                }else{
                                    axios.get("/addUser?email="+that.mail+"&pwd="+that.pwd).then(
                                        function (response) {
                                            if(response.data===1){
                                                alert("恭喜您已注册成功")
                                            }
                                        },function (err) {
                                            console.log("抱歉,系统错误"+"\n"+"注册失败!")
                                        }
                                    )
                                }
                            },function (err) {
                                alert("系统错误:500")
                            }
                        )
                    }else {
                        alert("验证码错误!")
                    }
                }

            },
            login:function () {

                var that=this;
                if(this.mail==="" || this.recode==="" || this.pwd===""){
                    alert("请完整表单信息!!!");
                }else {
                    if(this.input_code===this.recode){
                        axios.get("/userLogin?user_email="+that.mail+"&user_pwd="+that.pwd).then(
                            function (response) {
                                console.log(response);
                                if (response.data===true){
                                    window.location.href="/index";
                                }else{
                                    alert("抱歉,密码错误!");
                                }
                            },function (err) {
                                console.log(err);
                            }
                        )
                    }else {
                        alert("验证码错误!")
                    }
                }
            }
        }
    })
</script>
</html>